<template>
  <div class="footer">
    <div class="foot">
      <div class="footone">
        <p class="fotit1">大约</p>
        <p class="fotit2">
          可信地为充分研究的范式构建点材料，现欧沙等长明言 影确力的信门中介
        </p>
        <p class="fotit3">(554)616 9926</p>
        <p class="fotit4">
          <a href="#">example@yahoo.com</a>
        </p>
        <p class="fotit5">384 Maple Circle</p>
        <p class="fotit5">Simi Valley Nevada, 24757</p>
      </div>

      <div class="foottwo">
        <p class="fotit1">有用的链接</p>
        <ul>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />关于我们
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />博客
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />联系
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />生涯
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />员工
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />新闻
          </li>
        </ul>
      </div>
      
      <div class="foottwo">
       <p class="fotit1">大约</p>
        <ul>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />论坛
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />附表
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />项目
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />合作伙伴
          </li>
          <li>
            <img
              src="../assets/images/tanchuang.png"
              alt=""
              style="width: 10px; height: 10px"
            />员工
          </li>
        </ul>
      </div>

      <div class="footfour">
       <p class="fotit1">保持联系</p>
       <p class="fotit2">输入您的电子邮件地址以接收我们的新闻和优患</p>
       <div class="footput">
        <input type="email" placeholder="您的电子邮件地址" class="footinput" />
        <button class="footbut">发送</button>
       </div>
       <div class="last">
        <img src="../assets/imagesfd/facebook.png" alt="" style="width: 30px;height: 30px;">
        <img src="../assets/imagesfd/twitter.png" alt="" style="width: 30px;height: 30px;">
        <img src="../assets/imagesfd/facebook.png" alt="" style="width: 30px;height: 30px;">
        <img src="../assets/imagesfd/twitter.png" alt="" style="width: 30px;height: 30px;">
       </div>
      </div>
    </div>
  </div>
  <div class="bottombox">
    <div class="bottom">
      <p class="bottit">隐私和饼干条款和条件可及性</p>
      <p class="bottit1">版权所有 @ 2015 取消发货。保留所有权利。
        <a href="#">网页模板</a></p>
    </div>
  </div>
</template>


<script>
</script>


<style lang="scss">
.footer {
  width: 100%;
  padding: 130px 0;
  box-sizing: border-box;
  background-color: #1c2126;
  .foot {
    width: 65%;
    margin: auto;
    color: #637569;
    display: flex;
    .footone {
      width: 35%;

      .fotit2 {
        line-height: 30px;
        margin-bottom: 40px;
      }
      .fotit3 {
        color: white;
        font-size: 20px;
        font-weight: bold;
      }
      .fotit4 {
        color: #1a6dbe;
        text-decoration: none;
        margin-bottom: 30px;
      }
    }
    .fotit1 {
      color: white;
      margin-bottom: 30px;
    }
    .foottwo{
     width: 15%;
    }
    .foottwo > ul > li {
      list-style: none;
      margin-bottom: 15px;
    }
    .footput{
     margin-top: 30px;
    }
    .footinput{
     padding: 10px;
     background-color: black;
     border: none;
    }
    .footbut{
     padding: 10px 20px;
     background-color: #1A8AE1;
     color: white;
     border: none;
    }
    .last{
      margin-top: 23px;
      display: flex;
    }
  }
}
.bottombox{
  width: 100%;
  background-color: black;
  color: #6A737D;

  .bottom{
    width: 65%;
    margin: auto;
    padding: 40px 0;
    box-sizing: border-box;
    line-height: 40px;
  }
  .bottit1>a{
    color: #1A8AE1;
    text-decoration: none;
  }
}


@media screen and (max-width:1024px) {
  .footer{
    .foot{
    display: block;
    width: 90%;
    margin: auto;
    .footone{
      width: 100%;
    }
    .foottwo{
      width: 100%;
    }
  }
  }
}
</style>